web 图片优化指南

Aidan　2019/03/14

1. 先介绍几个图片的基础知识





1.1 图像分类

位图（Raster graphics）

In computer graphics, a raster graphics or bitmap image is a dot matrix data structure that represents a generally rectangular grid of pixels (points of color), viewable via a monitor, paper, or other display medium. Raster images are stored in image files with varying formats.

矢量图（Vector graphics）

Vector graphics are computer graphics images that are defined in terms of 2D points, which are connected by lines and curves to form polygons and other shapes. Each of these points has a definite position on the x- and y-axis of the work plane and determines the direction of the path; further, each path may have various properties including values for stroke color, shape, curve, thickness, and fill. Vector graphics are commonly found today in the SVG, EPS and PDF graphic file formats and are intrinsically different from the more common raster graphics file formats of JPEG, PNG, APNG, GIF, and MPEG4.

1.2 图像基本数据结构

图像数据结构

1.3 色彩空间(Color space)

A color space is a specific organization of colors.

color space

1.5 色彩模型(Color model)

A color model is an abstract mathematical model describing the way colors can be represented as tuples of numbers, typically as three or four values or color components.

注：（1）色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。（2）饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取0-100%的数值。（3）明度（V），亮度（L），取0-100%。

1.5 颜色深度(color depth)





Color depth or colour depth, also known as bit depth, is either the number of bits used to indicate the color of a single pixel, in a bitmapped image or video framebuffer, or the number of bits used for each color component of a single pixel.

位深度用于指定图像中的每个像素可以使用的颜色信息数量。每个像素使用的信息位数越多，可用的颜色就越多，颜色表现就更逼真。例如，位深度为 1 的图像的像素有两个可能的值：黑色和白色。位深度为 8 的图像有 28（即 256）个可能的值。位深度为 8 的灰度模式图像有 256 个可能的灰色值。


举个栗子：RGB 图像由三个颜色通道组成。8 位/像素的 RGB 图像中的每个通道有 256 个可能的值，这意味着该图像有 1600（2563） 万个以上可能的颜色值。有时将带有 8 位/通道 (bpc) 的 RGB 图像称作 24 位图像（8 位 x 3 通道 = 24 位数据/像素）。

1.6 图像模式(color modes)

颜色模式或图像模式决定了如何基于颜色模式中的通道数量来组合颜色。不同的颜色模式会导致不同级别的颜色细节和不同的文件大小。

  1. RGB 颜色模式（数百万种颜色）：Photoshop RGB 颜色模式使用 RGB 模型，并为每个像素分配一个强度值。在 8 位/通道的图像中，彩色图像中的每个 RGB（红色、绿色、蓝色）分量的强度值为 0（黑色）到 255（白色）。
  2. CMYK 颜色模式（四种印刷色）：在 CMYK 模式下，可以为每个像素的每种印刷油墨指定一个百分比值。为最亮（高光）颜色指定的印刷油墨颜色百分比较低；而为较暗（阴影）颜色指定的百分比较高。
  3. 索引颜色模式（256 种颜色）：索引颜色模式可生成最多 256 种颜色的 8 位图像文件。当转换为索引颜色时，Photoshop 将构建一个颜色查找表 (CLUT)，用以存放并索引图像中的颜色。如果原图像中的某种颜色没有出现在该表中，则程序将选取最接近的一种，或使用仿色以现有颜色来模拟该颜色。
  4. 灰度模式（8位，256 级灰度）：灰度模式在图像中使用不同的灰度级。在 8 位图像中，最多有 256 级灰度。灰度图像中的每个像素都有一个 0（黑色）到 255（白色）之间的亮度值。
  5. 位图模式（1位，两种颜色）：位图模式使用两种颜色值（黑色或白色）之一表示图像中的像素。位图模式下的图像被称为位映射 1 位图像，因为其位深度为 1。
  6. Lab 颜色模式：CIE Lab* 颜色模型 (Lab) 基于人对颜色的感觉。Lab 中的数值描述正常视力的人能够看到的所有颜色。因为 Lab 描述的是颜色的显示方式，而不是设备（如显示器、桌面打印机或数码相机）生成颜色所需的特定色料的数量，所以 Lab 被视为与设备无关的颜色模型。色彩管理系统使用 Lab 作为色标，将颜色从一个色彩空间转换到另一个色彩空间。
  7. 双色调模式：该模式通过一至四种自定油墨创建单色调、双色调（两种颜色）、三色调（三种颜色）和四色调（四种颜色）的灰度图像。
  8. 多通道模式：多通道模式图像在每个通道中包含 256 个灰阶，对于特殊打印很有用。

注：多数图像模式都可以指定位通道数，通常为：8位/通道、16位/通道或32位/通道

1.6 图像模式

color modes example

2. web 常见图片格式

扩展名文档类型MIME Type是否压缩编码
.bmpWindows OS/2 Bitmap Graphicsimage/bmp无压缩
.gifGraphics Interchange Format (GIF)image/gif无损压缩
.icoIcon formatimage/x-icon
.jpeg
.jpg		JPEG imagesimage/jpeg有损压缩
.pngPortable Network Graphicsimage/png无损压缩
.svgScalable Vector Graphics (SVG)image/svg+xml无损压缩
.tif
.tiff		Tagged Image File Format (TIFF)image/tiff无损压缩
.webpWEBP imageimage/webp有损压缩

2.2 gif 格式图片简介

The format supports up to 8 bits per pixel for each image, allowing a single image to reference its own palette of up to 256 different colors chosen from the 24-bit RGB color space. It also supports animations and allows a separate palette of up to 256 colors for each frame. These palette limitations make GIF less suitable for reproducing color photographs and other images with color gradients, but it is well-suited for simpler images such as graphics or logos with solid areas of color.

gif 数据结构 gif 数据结构

2.3 jpeg 格式图片简介

jpg 数据结构

2.3.1 jpeg 格式图片压缩原理简介





jpeg 格式图片压缩原理简介

2.3.1.1 Divided into 8*8 blocks

Divided into 8*8 blocks(1)

2.3.1.1 Divided into 8*8 blocks

Divided into 8*8 blocks(2)

2.3.1.2 Convert RGB to YCbCr

Convert RGB to YCbCr(1)

2.3.1.2 Convert RGB to YCbCr

Convert RGB to YCbCr(2)

2.3.1.3 Downsampling(optional)

Downsampling(optional)

2.3.1.4 Applay DCT[Discrete Cosine Transformation]

Applay DCTDiscrete Cosine Transformation

2.3.1.4 Applay DCT[Discrete Cosine Transformation]

Applay DCTDiscrete Cosine Transformation

2.3.1.5 Quantization

Quantization

2.3.1.5 Quantization [Quality Factor]

Quantization [Quality Factor]

2.3.1.5 Quantization

Quantization

2.3.1.6 Zigzag reordering & RLE

Zigzag reordering & RLE

2.3.1.7 Huffman encoding

Huffman encoding

2.4 png 格式图片简介

PNG文件标志PNG数据块.......PNG数据块
数据块符号数据块名称多数据块可选否位置限制
IHDR文件头数据块否否第一块
cHRM基色和白色点数据块否是在PLTE和IDAT之前
gAMA图像γ数据块否是在PLTE和IDAT之前
sBIT样本有效位数据块否是在PLTE和IDAT之前
PLTE调色板数据块否是在IDAT之前

注：PNG定义了两种类型的数据块，一种是关键数据块(critical chunk)，这是标准的数据块，另一种叫做辅助数据块(ancillary chunks)，这是可选的数据块。

数据块符号数据块名称多数据块可选否位置限制
bKGD背景颜色数据块否是在PLTE之后IDAT之前
hIST图像直方图数据块否是在PLTE之后IDAT之前
tRNS图像透明数据块否是在PLTE之后IDAT之前
oFFs(专用公共数据块)否是在IDAT之前
pHYs物理像素尺寸数据块否是在IDAT之前
sCAL(专用公共数据块)否是在IDAT之前
IDAT图像数据块是否与其他IDAT连续
tIME图像最后修改时间数据块否是无限制
数据块符号数据块名称多数据块可选否位置限制
tEXt文本信息数据块是是无限制
zTXt压缩文本数据块是是无限制
fRAc(专用公共数据块)是是无限制
gIFg(专用公共数据块)是是无限制
gIFt(专用公共数据块)是是无限制
gIFx(专用公共数据块)是是无限制
IEND图像结束数据否否最后一个数据块

2.4.1 png 格式图片压缩原理简介





png 格式图片压缩原理简介

2.4.1.1 Prediction





在这一阶段，我们每次会处理图片中一行的数据，首先通过Filter阶段处理这一行当中每一个的像素点中每条通道的值，也就是我们常说的ARBG。它交由差分处理器来重新计算该通道的值。差分处理会根据这个像素点上通道和之前或者之上像素点对应通道值之间的差异，进行差分编码，也就是说，如果原本相邻像素点之间通道的值之间很接近，那么我们就会获得很多的1,0,-1这种很小的值。

[2,3,4,5,6,7,8] can become [2,1,1,1,1,1,1], where

[2, 3–2=1, 4–3=1, 5–4=1, 6–5=1, 7–6=1, 8–7=1]

注：差分编码器比较的是像素点之间对应通道的值，而并不是整个像素点。

2.4.1.1 Compression





在Prediction处理完毕之后，再将这一转换的结果输出给Deflate，Deflate执行真正的压缩操作，它会通过LZ77和Huffman对图像进行编码，最后将处理之后的结果保存。

Compression 1 Compression 2

3. 那么优化图片我们到底能做什么





3.1 选择正确的图像格式

选择正确的图像格式

  1. 您是否需要动画？如果需要，GIF 是唯一的通用选择。
    • GIF 将调色板限制为最多 256 色，这对大多数图像而言都不是好的选择。 况且，对于调色板较小的图像，PNG-8 的压缩效果更佳。 因此，只有需要动画时，GIF 才是正确的选择。
  2. 您是否需要使用最高分辨率保留精细的细节？请使用 PNG。
    • 除了选择调色板的大小外，PNG 不采用任何有损压缩算法。 因此，它能生成最高质量的图像，但代价是文件大小要比其他格式大得多。 请谨慎使用。
    • 如果图像资产包含由几何形状组成的图像，请务必考虑将其转换成矢量 (SVG) 格式！
    • 如果图像资产包含文本，请停下来再做考虑。 图像中的文本无法选择、搜索或“缩放”。 如果您需要表现一种自定义外观（出于品牌推广或其他原因），请改用网页字体。
  3. 您是否要优化照片、屏幕截图或类似的图像资产？请使用 JPEG。
    • JPEG 组合使用有损和无损优化来减小图像资产的文件大小。 请尝试几种 JPEG 质量级别，为您的资产找到最佳的质量 与文件大小平衡点。

3.2 合理的压缩图片

  • 避免使用有损编解码器重新压缩图像
  • 减少不必要的图像解码及调整大小的成本

3.3 使用 CDN

3.4 使用内容类型协商

<picture>
  <source srcset="/path/to/image.webp" type="image/webp">
  <img src="/path/to/image.jpg" alt="">
</picture>

注：最好使用有优化图像功能的 CDN，自动返回最小尺寸的图片类型

3.5 使用 srcset 提供 HiDPI 图像

<img src="photo.png" srcset="photo@2x.png 2x" ...>

<picture>
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>

注：最好使用有优化图像功能的 CDN，自动返回最合适 HiDPI 的图片

3.6 延迟加载非关键图像

3.7 缓存图像资产

3.8 预加载关键图像资产

3.9 测试图片优化的效果

注：只能检测 load 事件之前加载完成的图片。

3.10 Web performance budgets for images



Web performance budgets for images

4. Some Tools

5. References

6. Thanks & FAQ